<template>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 py-2 gap-4 md:gap-2 gva-container2">
    <gva-card custom-class="col-span-1 h-32">
      <gva-chart :type="1" :userTotalInfo="userTotalInfo" :percentChange="percentChange" title="用户数量" />
    </gva-card>
    <gva-card custom-class="col-span-1 h-32">
      <gva-chart :type="2" :userTotalInfo="userTotalInfo" :percentChange="percentChange" title="用户增量" />
    </gva-card>
    <gva-card custom-class="col-span-1 h-32">
      <gva-chart :type="3" :dataTotalInfo="dataTotalInfo" :percentChange="percentChange" title="数据数量" />
    </gva-card>
    <gva-card custom-class="col-span-1 h-32">
      <gva-chart :type="4" :dataTotalInfo="dataTotalInfo" :percentChange="percentChange" title="数据增量" />
    </gva-card>
    <gva-card title="开放数据趋势图" custom-class="col-span-1 md:col-span-2 md:row-start-2 lg:col-span-6 col-start-1 row-span-2">
      <gva-chart :type="5" :openDataTrend="openDataTrend" />
    </gva-card>
    <div class="col-span-1 lg:col-span-4 flex flex-wrap gap-4">
      <gva-card custom-class="flex-1 h-42">
        <gva-chart :type="6" :nodePieData="nodePieData" />
      </gva-card>
      <gva-card custom-class="flex-1 h-42">
        <gva-chart :type="7" :appPieData="appPieData" />
      </gva-card>
      <gva-card custom-class="flex-1 h-42">
        <gva-chart :type="8" :storagePieData="storagePieData" />
      </gva-card>
    </div>
    <gva-card title="数据交易收益统计" custom-class="col-span-1 md:col-span-2 lg:col-span-4 row-span-2">
      <gva-chart :type="9" :incomeTotalInfo="incomeTotalInfo" :incomeTrend="incomeTrend" />
    </gva-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { gettotal } from '@/api/systemTotal'
import { GvaCard, GvaChart } from "./componenst"

// 响应式数据
const userTotalInfo = ref({})
const dataTotalInfo = ref({})
const incomeTotalInfo = ref({})
const openDataTrend = ref([])
const incomeTrend = ref([])
const percentChange = ref(0)
const nodePieData = ref([])
const appPieData = ref([])
const storagePieData = ref([])

// 获取数据
const fetchData = async () => {
  try {
    const response = await gettotal()
    console.log('API response:', response.data) // 打印 API 响应
    if (response.data) {
      const data = response.data
      // 更新数据
      userTotalInfo.value = data.UserTotalInfo
      dataTotalInfo.value = data.DataTotalInfo
      incomeTotalInfo.value = data.IncomeTotalInfo
      openDataTrend.value = data.DataTotalInfo.OpenDataTrend
      incomeTrend.value = data.IncomeTotalInfo.IncomeTrend

      // 更新饼图数据
      nodePieData.value = [
        { value: data.NodeTotalInfo.OnlineNum, name: '在线数' },
        { value: data.NodeTotalInfo.TotalNum - data.NodeTotalInfo.OnlineNum, name: '离线数' }
      ]
      appPieData.value = [
        { value: data.AppTotalInfo.OnlineNum, name: '在线应用' },
        { value: data.AppTotalInfo.TotalNum - data.AppTotalInfo.OnlineNum, name: '离线应用' }
      ]
      storagePieData.value = [
        { value: data.StorageTotalInfo.UsedSpace, name: '使用空间' },
        { value: data.StorageTotalInfo.TotalSpace - data.StorageTotalInfo.UsedSpace, name: '剩余空间' }
      ]

      // 计算百分比变化（根据需要调整计算方式）
      if (data.DataTotalInfo.DataNum > 0) {
        percentChange.value = ((data.DataTotalInfo.DataIncreaseNum / data.DataTotalInfo.DataNum) * 100).toFixed(2)
      } else {
        percentChange.value = 0
      }
    } else {
      console.error('Error fetching data:', response.data.msg)
    }
  } catch (error) {
    console.error('Failed to fetch data:', error)
  }
}

// 组件挂载时获取数据
onMounted(fetchData)
</script>

<style lang="scss" scoped>
/* 自定义样式 */
</style>
